<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/cmms.css" />
		<link rel="stylesheet" href="../../../css/iconfont.css" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<style type="text/css">
		p,input{
			margin: 0;
		}
		input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{
			margin: 0;
			text-align: left;
		}
		#noticeList{
			position: relative;
		}
		.codeList{
			padding: 10px;
			background-color: #FEFEFE;
		}
		.codeList>li{
			line-height: 30px;
			border-bottom: 1px solid #ccc;
			padding: 10px;
			margin-bottom: 10px;
		}
		.codeList>li>div{
			display: flex;
			justify-content: space-between;
		}
		.codeList>li>div:nth-child(1)>p{
			font-size: 15px;
			color: #333;
			font-weight: 500;
		}
		.codeList>li>div:nth-child(2)>span{
			font-size: 14px;
			color: #A8ACB3;
			width: 100%;
		}
		.codeList>li>div:nth-child(3)>p>span{
			line-height: 30px;
			margin-right: 10px;
			font-size: 14px;
			color: #A8ACB3;
		}
		.codeList>li>div:nth-child(3)>button{
			border: 1px solid #FF6969;
			border-radius: 4px;
			color: #FF6969;
			background-color: #fff;
			height: 24px;
			padding: 0 10px;
			margin-top: 2px;
		}
		.darkC{
			color: #333;
		}
		.lightC{
			color: #C2C2C2;
		}
		.blueC{
			color: #00507E;
		}
		.mediumC{
			color: #808080;
		}
		#noticeList .mui-bar{
			background-color: #00507E;
		}
		#noticeList .mui-bar>a{
			color: #fff;
		}
		#noticeList .mui-bar>h1{
			color: #fff;
		}
		#noticeList .mui-bar>a.mui-pull-right{
			font-size: 16px;
			line-height: 24px;
		}
		#refreshContainer{
			position: absolute;
			top: 45px;
		}
		#noticeList .notFind {
			text-align: center;
			overflow: auto;
			position: relative;
			height: 345px;
			padding-top: 45px;
		}
		#noticeList .notFind img{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		#noticeList .notFind p{
			position: absolute;
			bottom: 40px;
			text-align: center;
			width: 100%;
		}
	</style>
	<body>
		<div id="noticeList" v-cloak>
			<header class="mui-bar mui-bar-nav ">
			    <a id="icon-menu" class="mui-icon mui-icon-left-nav mui-pull-left" @tap="backIndex"></a>
			    <a class="mui-icon mui-pull-right" @tap="toEdit">{{noticeList.length>0?'编辑':'新增'}}</a>
			    <h1 class="mui-title">{{topTitle}}</h1>
			</header>
			<div id="refreshContainer" class="mui-scroll-wrapper" :style="contentStyleObj">
				<div class="mui-scroll">
					<ul class="codeList">
						<li v-for="(notice,index) in noticeList" class="panel">
							<div>
								<p>{{notice.code|appType}}通知</p>
							</div>
							<div class="proBox">
								<span>通知时间:{{notice.time}}</span>
							</div>
							<div>
								<p>
									<span>备注:</span>
									<span>{{notice.remark}}</span>
								</p>
								<button type="button" @tap="deleteNotice(notice.id)">删除</button>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="notFind" v-show="show">
				<img src="../../../img/notFind.png" alt="未找到对应的数据" />
				<p>暂无配置信息</p>
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script src="../../../js/cmms.js?time=222"></script>
		<!-- <script type="text/javascript">
			mui.init()
		</script> -->
		<script type="text/javascript">
			new Vue({
				el:"#noticeList",
				data(){
					return{
						show:false,
						token:'',
						searchInput:'',
						topTitle:'通知配置',
						noticeList:[],
						refresh:true,
						pullDirection:'',
						contentStyleObj:{
							height:''
						}
					}
				},
				created(){
					let self = this;
					window.addEventListener('resize', self.getHeight);
					self.getHeight()
				},
				filters:{
					appType:function(value){
						switch(value){
							case '1':
								return '短信';
								break;
							case '2':
								return '微信';
								break;
							case '3':
								return 'APP';
								break;
						}
					}
				},
				mounted(){
					this.getPages();
					//var vConsole = new VConsole();
				},
				methods:{
					getHeight(){
						this.contentStyleObj.height=window.innerHeight-45+'px';
						console.log(this.contentStyleObj.height)
					},
					getPages(){
						let _this = this;
						AT.muiAjax('/partner-sale/orderReportConfig/list','post',{
							userType:2
						},function(res){
							console.log(res);
							if(res.state){
								_this.noticeList = res.list;
								localStorage.setItem('noticeList',JSON.stringify(_this.noticeList));
							}else{
								_this.show = true;
							}
						});
					},
					deleteNotice(id){
						let _this = this;
						AT.muiAjax('/partner-sale/orderReportConfig/delete','post',{
							id:id
						},function(res){
							console.log(res);
							mui.toast(res);
							var timer = setTimeout(function(){
									location.reload();
									clearTimeout(timer);
							},500);
							
						});
					},
					toEdit(){
						location.href = './editNotice.html';
					},
					backIndex(){
						location.href = './mine.html';
					}
				}
			})
		</script>
	</body>
</html>
